<style >
#app{display: table;width:100%;}
body{background: #fff;}
.btcxexcharge .usercener_all{
    display: flex;
    justify-content: space-between;
	margin-top:20px;

}	
.btcxexcharge .usercenter_all .el-tabs{margin:0 0 20px 0;width: 100%;}
.btcxexcharge .usercenter_cc{
	border:1px solid #dcdcdc;
	width: 49.5%;
	/*height:353px;*/
}
.btcxexcharge .list_form{    width: 500px;
    /*height: 290px;*/
    margin: 0 auto;
    margin-top: 20px;
    border: 1px solid #f5f5f5;
    background: #f5f5f5;
    color: #333;
    padding-top: 15px;
    box-sizing: border-box;
}
.btcxexcharge .alt_item{width:500px;margin:0 auto;color:#666;}
.btcxexcharge .list_form .el-input__inner{height:36px;}
.btcxexcharge .list_form .el-form-item__label{line-height: 30px;}
.btcxexcharge .list_form .el-form-item{padding:0 35px;margin-bottom: 10px;}
.btcxexcharge .list_text{margin-left:35px;margin-bottom: 20px;display: inline-block;font-size: 12px;}
.btcxexcharge .list_form .list_buynum{margin-top:20px;}
.btcxexcharge .span_btn_all{    width: 450px;
    height: 40px;
    /*margin-top: 27px;*/
    /*margin-left: 35px;*/
    font-size:14px;
    color: #fff;
    font-size: 14px;
    background: #03c086;
    border-radius: 3px;}
.btcxexcharge .span_btn_red{background: #f45758;border:none;}
.btcxexcharge .span_btn_all:hover,.span_btn_all:focus{opacity: 0.9; background: #03c086;}
.btcxexcharge .span_btn_red:hover,.span_btn_red:focus{opacity: 0.9; background: #f45758;}
.btcxexcharge.login_content{    width: 1200px;margin:0 auto;
    height: 75.8vh;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/

    /*justify-content: center;*/
}
.btcxexcharge .usercenter_header{
	border:1px solid #dcdcdc;
	display: flex;
	height:152px;
	align-items: center;
	margin-top: 20px;
}
.btcxexcharge .header_left,.header_right{display: flex;padding:0 50px;    width: 50%;align-items: center;}
.btcxexcharge .header_left{    border-right: 1px solid #dcdcdc;flex:4;}
.btcxexcharge .header_text{ height: 65px;       align-items: center;  display: flex;flex-direction: column;margin-left: 17px;}
/*.header_right .header_text{display: flex;flex-direction: column;padding:0;}*/
.btcxexcharge .header_text span{height:50%;align-items: center;display: flex;}
.btcxexcharge .header_img{font-size:20px;}
.btcxexcharge .header_right{justify-content: center;}
.btcxexcharge .header_btn{    width: 200px;
    height: 130px;
    border: 1px solid #dcdcdc;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    margin-top: 10px;
}
.btcxexcharge .header_btn p{margin-bottom:0;}
.btcxexcharge .width_fixed{width:170px;}
.btcxexcharge .el-input__inner{height:32px;}
.btcxexcharge .el-table td{padding:12px 0;}
.btcxexcharge .el-form--inline .el-form-item{margin-bottom: 0;}
.btcxexcharge .list_content{margin-bottom: 30px;}
/*.alt_item{border-top: 1px solid #dcdcdc;width: 100%;}*/
.btcxexcharge .alt_title{
	    font-size: 13px;
    /*color: #333;*/
    height: 30px;
    line-height: 30px;
    margin:5px 0;

}
.btcxexcharge .alt_content_title{    font-size: 13px;
    /*color: #333;*/
    height: 24px;
    line-height: 24px;
}
.btcxexcharge .alt_content{height:40px;}
.btcxexcharge .alt_ul{
	font-size: 14px;
    color: #333;
    background: #f5f5f5;
    border: 1px solid #dcdcdc;
    list-style: inside;
    margin-bottom: 20px;
    padding-bottom: 20px;
    margin-top:0;
}
.btcxexcharge .alt_ul li{
	list-style: inside;
    margin-top: 10px;
    margin-left: 10px;
}
/*.usercenter_all{width:100%;}*/
.btcxexcharge .usercernter_ul{
	display: flex;justify-content: space-between;

}
/*.el-button{padding:7px 15px;font-size: 12px;}*/
.btcxexcharge .el-table th{text-align: left;}
.btcxexcharge .el-table{border:1px solid #ebeef5;margin-top: 10px;}
.btcxexcharge .el-table thead tr th{background: #f5f5f5;}
.btcxexcharge .el-dialog__wrapper{
	display: flex;
	align-items: center;
}
.btcxexcharge .el-dialog{width:422px;}
.btcxexcharge .dialog_alt{
	    margin-left: 130px;
    /*margin-top: 20px;*/
    /*margin-bottom: 5px;*/
    font-size: 12px;
    color: #f56c6c;
}
.btcxexcharge .buysell .el-dialog{width:420px;}
.btcxexcharge .buysell .el-dialog__body{padding: 5px 25px 10px;}
.btcxexcharge .buysell .el-button{padding:9px 15px;font-size: 12px;}
.btcxexcharge .buysell .remit_content{width: 100%;display: flex;margin:0;}
.btcxexcharge .form_part .el-input{width:324px;}
.btcxexcharge .form_part .el-input__inner{height:36px;}
.btcxexcharge .el-dialog__body{padding:0;}
.btcxexcharge .btn_add .el-form-item__content{max-width: 324px;}
.btcxexcharge .remit_content{width:340px;margin:0 auto; margin-left:55px;margin-top:13px;}
.btcxexcharge .remit_content p{
	margin:0;
}
.btcxexcharge .more_right{
    position: absolute;
    right: 0;
    top: 0;
    line-height: 30px;
    font-size: 13px;
}
.btcxexcharge .remit_icon{
	color:#e6a23c;
	font-size: 24px;
	position: absolute;
	top:40%;
	left:20px;
}
.btcxexcharge .form_part .dialog-footer .el-button{height:32px;padding:7px 15px;}
</style>
<template>
  <div class="btcxexcharge">  
      
	<template v-if="routerPath=='btcxexcharge'" >

      <div class="login_content btcxexcharge">  
      		<div class="usercenter_all">
      			<div class="identity_header">      			
	      			<el-breadcrumb separator="/" class="bread" id="mybread">
				        <el-breadcrumb-item v-for="(item,index) in breadcrumbs" :key="index" :to="item">
				          {{ item.meta.name || item.name }}
				        </el-breadcrumb-item>
				      </el-breadcrumb>
	      		</div>
  			
  			</div>   
      		
      		<div class="usercener_all">
      			<div class="usercenter_cc">
      				<div class="list_header">买入BTCX</div>
      				<div class="list_content">
  						<el-form  class="list_form"  :model="buyForm">
				            <el-form-item label="买入价(￥)" >
				            	<div class="more_right">可用(CNY):{{cnytotal}}</div>
				               <el-input v-model="buyForm.buyprice" disabled  >
							  </el-input>
				            </el-form-item>
				          	 <el-form-item label="买入量(BTCX)" class="list_buynum">
				               <el-input v-model="buyForm.buynum" type="number" placeholder="请输入买入量" >
							  </el-input>
				            </el-form-item>
				            <span class="list_text">需要CNY:{{buyForm.buynum}}</span>
				            <el-form-item>
				            	<el-button style="width:100%;" class="span_btn_all" type="success"  @click="handlebuy()" >CNY兑换BTCX</el-button>
				            </el-form-item>

			          	</el-form>
			          	<div class="alt_item">
		       				<div class="alt_title">温馨提示</div>
			       			<div class="alt_content">
			       				<div class="alt_content_title">
			       					BTCX与CNY兑换后，为实时到账，请放心使用。<br/>			
									如订单产生纠纷，请立即联系hht.one客服进行处理
			       				</div>
			       				
			       			</div>
		       			</div>
      				</div>
      			</div>
      			<div class="usercenter_cc">
      				<div class="list_header">卖出BTCX</div>
      				<div class="list_content">
  						<el-form  class="list_form"  :model="sellForm">
				            <el-form-item label="卖出价(￥)" >
				            	<div class="more_right">可用(CNY):0</div>

				               <el-input v-model="sellForm.sellprice" disabled  >
							  </el-input>
				            </el-form-item>
				          	 <el-form-item label="卖出量(BTCX)" class="list_buynum">
				               <el-input v-model="sellForm.sellnum" type="number" placeholder="请输入卖出量" >
							  </el-input>
				            </el-form-item>
				            <span class="list_text">需要CNY:{{sellForm.sellnum}}</span>
				            <el-form-item>
				            	<el-button style="width:100%;" class="span_btn_all span_btn_red" type="success"  @click="handlesell()" >BTCX兑换CNY</el-button>
				            </el-form-item>

			          	</el-form>
			          	<div class="alt_item">
		       				<div class="alt_title">温馨提示</div>
			       			<div class="alt_content">
			       				<div class="alt_content_title">
			       					BTCX与CNY兑换后，为实时到账，请放心使用。<br/>			
									如订单产生纠纷，请立即联系hht.one客服进行处理
			       				</div>
			       				
			       			</div>
		       			</div>	
      				</div>
      			</div>
      		</div>
       		

      </div>
    	   <!-- 买入卖出提示 -->
         <el-dialog title="提示" top="0"  class="form_part buysell" :visible.sync="buySellVisible"  :close-on-click-modal="false">
           <!-- <div class="remit_alt">请按提示信息向该卖家汇款</div> -->
           <div class="remit_content">
            <i class="el-icon-success icon_success"></i>前往C2C进行交易。
           </div>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary"  @click="$router.push('/assetmanage/ccdeal')" >确定</el-button>
             
            </div>
        </el-dialog>
         <!-- 汇款订单 -->
         <el-dialog title="温馨提示" top="0"  class="form_part" :visible.sync="remitFormVisible"  :close-on-click-modal="false">
	         <!-- <div class="remit_alt">请按提示信息向该卖家汇款</div> -->
	         <div class="remit_icon">
	         	<i class="el-icon-warning"></i>
	         </div>
	         <div class="remit_content">
	         	<p>1.将CNY兑换成BTCX后，使用C2C功能，卖出BTCX所得CNY入账至银行卡中；</p>
	         	<p>2、BTCX兑换成CNY功能关闭，使用C2C功能可直接卖出BTCX。</p>
	         	
	         </div>
	          <div slot="footer" class="dialog-footer">
	            <el-button type="primary"  @click="remitFormVisible = false" >确定</el-button>
	           
	          </div>
        </el-dialog>
    </template>
    <template v-else>
        <router-view></router-view>
    </template>
    
    
   
  </div>
</template>

<script>
import * as users from '../api/users';
import * as accountUser from '../api/accountUser';





var code ; //在全局定义验证码
export default {

  components:{

  },
  computed: {   
 	activeMenu: function(){
      // return this.$route.name
      return this.$route.path
    },
    breadcrumbs: function(){
      return (this.$route && this.$route.matched) || []
    }
  },
  data() {
    return {
      cnytotal:0,
    	note:'bj9w2',
    	remitFormVisible:true,
      buySellVisible:false,
     	addLoading:false,
    	buyForm:{buyprice:1,buynum:0},   
    	sellForm:{sellprice:1,sellnum:0},
    	isRecharge:true,
    	rechargeList:[],
    	withdrawList:[],
    	linkUrl:'复制内容',
    	expands:[],
    	filters:{},
    	userId:'',
    	list:[{name:'btc',cid:'1'},{name:'btc',cid:'2'}],
    	showCount:20,
		  total:0,
    	page: 1,
		  onOff:true,
    	loginFormRules:{
        userName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
      },
      picLyanzhengma:'',
      checkCode:'',
      loginForm:{region:'china'},
      username: '',
      password: '',
      isBtnLoading: false,
      routerPath:'',
      isRealName:false,
      userInfo:'',
      showCount:20,
	  total:20,
	  page:1,
    };
  },
 
  methods: {
  	handlesell(){//BTCX兑换CNY
  		this.buySellVisible=true;
  	},
 
	handlebuy:function(){
		//立即买入
    if(!this.buyForm.buynum || this.buyForm.buynum<100){
      this.$message.error("兑换值必须大于100");
      return;
    }
    if(this.cnytotal<0){
      this.$message("没有足够的CNY");
      return;
    }
    this.buySellVisible=true;
   /* 
    this.isBtnLoading=true;
    let para={
      userId:this.userId,
      amount:this.buyForm.buynum,
      payType:this.payType
    }
    console.log(para)
    accountUser.addrecharge.r(para).then((res)=>{
      console.log(res);
      if(res.data.retCode==1){
        this.buySellVisible=true;
          
        }else{
          this.$message.error(res.data.retMsg);
        }
        this.isBtnLoading=false;
    })*/
	},
  	toggleStatus(){
  		console.log(this.onOff)
  	},

    fetchDataUser(){
    	//获取用户信息
    	let para={
    		userId:this.userId,
    	}
	  	users.info.r(para).then((res) => {
	  		console.log(res)
	  		if(res.data.retCode==1){
	  			if(res.data.data.realName){
  					this.isRealName=true;
  				}else{
  					this.isRealName=false;
  				}
  				this.userInfo=res.data.data;
  				sessionStorage.setItem("localUser",JSON.stringify(res.data.data))
	  		}else{
	  			this.$message.error(res.data.retMsg);
	  		}
	       
	       

	      });
    },
 	fetchData(init) {
      this.loading = true;
      if(!this.$_has([users.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }
      let para = {
          // groupId:this.groupId,
          showCount:this.showCount,
          currentPage:this.page,//当前查询页
          keyword:this.filters.name
        };
        if(this.groupId!=undefined&&this.groupId!="undefined"&&this.groupId!=""){
          this.$set(para,'groupId',this.groupId)
        }
      users.request.r(para).then((res) => {
        this.total=res.data.data.totalRow;
        this.list = res.data.data.list;
        
        if(this.list!=null){
          this.list.map(x=>{
            this.$set(x,'showIndex',2)  
            this.$set(x,'showClose',false)       
            this.$set(x,'showCloseG',false)       
            this.$set(x,'showIndexG',2)         
          })
        }

        this.loading = false;
      });
    },
 
  	handleRecharge(index,row){
  		console.log(this.expands.toString())
  		if(this.expands.toString()!=row.cid){
  			this.isRecharge=true;
	  		this.expands = [];
			this.expands.push(row.cid)
  		}else{
	  		this.expands = [];
  			
  		}
  		
  	},
	handleWithd(index,row){
		this.isRecharge=false;
		this.expands = [];
		this.expands.push(row.cid)
	},
	handleDeal(index,row){

	},

  },
	watch: {
      // 如果路由有变化，会再次执行该方法
      "$route": function(){
        this.routerPath=this.$route.path.split("/").pop();
        this.fetchDataUser()

      }
  },
  created() {
    this.routerPath=this.$route.path.split("/").pop();

    // this.fetchData();
    this.fetchDataUser();
    // sessionStorage.setItem('userId','152420221979644577')
    this.userId=sessionStorage.getItem('userId')
  }
};
</script>
